<template>
	<view class="p_over">
		<noneData noneTitle="暂无评论~" v-if="listData.length === 0"></noneData>
		<view class="p_flex p_lr_32 list_wrapper" v-for="item in listData" :key="item.id">
			<view class="p_photo_80 p_bg_f3">
				<image :src="item.avatar_image" class="p_full" mode="aspectFill"></image>
			</view>
			<view class="p_flex_2">
				<view class="p_flex2 p_margin_b_32">
					<view class="p_font_28 p_color_7a p_flex_1 p_one_text">
						{{item.nickname}}
					</view>
					<view class="p_flex p_margin_l_100">
						<image src="https://dy.sykj365.com/uploads/mini/xingxing@2x.png" mode="aspectFill" class="p_star"
							v-for="(item, index) in item.star" :key="index"></image>
						<image src="https://dy.sykj365.com/uploads/mini/xingxing1@2x.png" mode="aspectFill" class="p_star"
							v-for="(item, index) in (5 - item.star)" :key="index"></image>
					</view>
				</view>
				<view class="p_flex3" v-if="item.label.length > 0">
					<view class="p_font_24 tags" v-for="(itemLabel, indexLabel) in item.label" :key="indexLabel">
						{{itemLabel}}
					</view>
				</view>
				<view class="p_font_28">
					{{item.remark}}
				</view>
				<view class="p_flex4" v-if="item.images.length > 0">
					<image :src="itemImg" mode="aspectFill" class="center_img"
						v-for="(itemImg, indexImg) in item.images" :key="indexImg"
						@click="getLook(item.images, indexImg)"></image>
					<view class="center_view"></view>
				</view>
				<view class="p_flex5 p_font_26 p_margin_t_16">
					<view class="p_color_b2">{{item.create_time}}</view>
					<view class="p_flex">
						<image src="https://dy.sykj365.com/uploads/mini/zan@2x.png" class="p_star"></image>
						<view class="p_color_b2 p_margin_l_8">{{item.like_num}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="p_font_24 p_color_7a p_text_c p_b_36" v-if="loadingText && (listData.length > 0)">{{loadingText}}
		</view>
	</view>
</template>

<script>
	import noneData from '../../components/noneData.vue';

	export default {
		components: {
			noneData
		},
		data() {
			return {
				pageNum: 1,
				listData: [],
				isLastPage: false, // 是否是最后一页
				loadingText: ''
			}
		},
		onLoad() {
			this.getListData();
		},
		onReachBottom() {
			if (!this.isLastPage) {
				this.loadingText = '加载中...';
				this.pageNum++;
				this.getListData();
			} else {
				this.loadingText = '已加载全部';
			}
		},
		methods: {
			getListData() {
				this.$http.post(this.$api.commentList, {
					page: this.pageNum
				}).then(res => {
					this.listData = this.listData.concat(res.data.data);

					if (this.pageNum === res.data.last_page) {
						this.isLastPage = true;
						this.loadingText = '已加载全部';
					} else {
						this.isLastPage = false;
					}
				})
			},
			getLook(imgs, index) {
				getApp().getBigImg(imgs, index, true);
			}
		}
	}
</script>

<style lang="less">
	.tags {
		padding: 8rpx 16rpx;
		color: #05B570;
		background-color: rgba(6, 161, 126, 0.08);
		border-radius: 4rpx;
		margin-right: 16rpx;
		margin-bottom: 16rpx;
	}

	.center_img {
		width: 188rpx;
		height: 188rpx;
		border-radius: 16rpx;
		margin-top: 16rpx;
	}

	.center_view {
		width: 188rpx;
		height: 0;
	}

	.list_wrapper {
		margin: 32rpx 0 48rpx;
	}
</style>
